/*
定义指令全局注册
1：只定义指令，在main.js注册
2：使用Vue.use方式注册
点击dom区域外执行某事件
dayjs 一般用于移动端
moment：常用于pc端
*/
import defaultImg from '@/assets/common/head.jpg'
import store from '@/store'
import moment from 'moment'
let fn = ''
const dirObj = {
  imgerror: {
    inserted (dom, obj) {
      // 如果指令所在标签有src就使用它的src,如果没有就使用它传入的图片，再没有就使用默认图片
      dom.src = dom.src || obj.value || defaultImg
      dom.onerror = () => {
        // 如果图片加载出错，就使用传入图片或者是默认图片
        dom.src = obj.value || defaultImg
      }
    },
    componentUpdated (dom, obj) {
      // 考虑更新问题
      dom.src = dom.src || obj.value || defaultImg
    }
  },
  abc: {},
  clickOut: {
    // bind:类似beforeMount,
    // inserted:类似于mounted
    // update:更新时，指令所在组件有更新，但不保证更新完成
    // componentUpdated:更新完成时，指令所在组件包括子组件都更新完成，类似updated
    // unbind:销毁(指令所在dom)后，类似destroyed
    inserted (dom, obj, vnode) {
      fn = e => {
        // console.log(e.target)
        if (dom.contains(e.target)) {
          // console.log('内部点击')
        } else {
          // console.log('外部点击')
          obj.value()
        }
      }
      document.addEventListener('click', fn)
    },
    unbind () {
      document.removeEventListener('click', fn)
    }
  },
  formatTime: {
    inserted (dom, obj) {
      dom.innerText = moment(obj.value).format('YYYY-MM-DD')
    },
    componentUpdated (dom, obj) {
      dom.innerText = moment(obj.value).format('YYYY-MM-DD')
    }
  },
  // 按钮权限指令
  showBtn: {
    inserted (dom, obj) {
      if (!store.state.user.userInfo.roles.points.includes(obj.value)) {
        dom.style.display = 'none'
      }
    }
    // 不写更新处理也可以，因为权限数据只在登陆获取用户信息时拿到，中途不会更新
  }
}
export default {
  install (Vue) {
    Object.keys(dirObj).forEach(key => {
      Vue.directive(key, dirObj[key])
    })
  }
}
